{{define "/chat/head.shtml"}}
<script>
    function userId(id) {
        if (typeof id == "undefined") {
            var r = sessionStorage.getItem("userid");
            if (!r) {
                return 0;
            } else {
                return parseInt(r);
            }
        } else {
            sessionStorage.setItem("userid", id);
        }
    }
    function userInfo(o) {
        if (typeof o == "undefined") {
            var r = sessionStorage.getItem("userinfo");
            if (!!r) {
                return JSON.parse(r);
            } else {
                return null
            }
        } else {
            sessionStorage.setItem("userinfo", JSON.stringify(o));
        }
    }
    var url = location.href;
    var isOpen = url.indexOf("/login") > -1 || url.indexOf("/register") > -1
    if (!userId() && !isOpen) {
        // location.href = "login.shtml";
    }

</script>

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>IM-xixi chat</title>
<meta name="Description" content="专业的物联网行业方案专家，为广大新技术新产品新商业模式提供有力的解决方案支持">
<meta name="Keywords" content="无人售货机，小程序，推送，群聊,单聊app">
<link rel="stylesheet" href="/asset/plugins/mui/css/mui.css" />
<link rel="stylesheet" href="/asset/css/chat.css" />
<link rel="stylesheet" href="/asset/css/audio.css" />
<script src="/asset/plugins/mui/js/mui.js"></script>
<script src="/asset/js/vue.min.js"></script>
<script src="/asset/js/util.js"></script>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
<script>
    function post(uri, data, fn) {
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "//" + location.host + "/" + uri, true);
        // 添加http头，发送信息至服务器时内容编码类型
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
                fn.call(this, JSON.parse(xhr.responseText));
            }
        };
        var _data = [];
        if (!!userId()) {
            // data["userid"] = userId();
        }
        for (var i in data) {
            _data.push(i + "=" + encodeURI(data[i]));
        }
        xhr.send(_data.join("&"));
    }
    function uploadfile(uri, dom, fn) {
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "//" + location.host + "/" + uri, true);
        // 添加http头，发送信息至服务器时内容编码类型
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
                fn.call(this, JSON.parse(xhr.responseText));
            }
        };
        var _data = [];
        var formdata = new FormData();
        if (!!userId()) {
            formdata.append("userid", userId());
        }
        formdata.append("file", dom.files[0]);
        xhr.send(formdata);
    }
    function uploadblob(uri, blob, filetype, fn) {
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "//" + location.host + "/" + uri, true);
        // 添加http头，发送信息至服务器时内容编码类型
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
                fn.call(this, JSON.parse(xhr.responseText));
            }
        };
        var _data = [];
        var formdata = new FormData();
        formdata.append("filetype", filetype);
        if (!!userId()) {
            formdata.append("userid", userId());
        }
        formdata.append("file", blob);
        xhr.send(formdata);
    }
    function uploadaudio(uri, blob, fn) {
        uploadblob(uri, blob, ".mp3", fn);
    }
    function uploadvideo(uri, blob, fn) {
        uploadblob(uri, blob, ".mp4", fn);
    }
</script>

<style>
    .flex-container {
        display: flex;
        flex-direction: row;
        width: 100%;
        padding-top: 10px;
        position: fixed;
        bottom: 0px;
        background-color: #FFFFFF;
    }

    .item-1 {
        height: 50px;
        height: 50px;
        padding: 5px 5px 5px 5px;
    }

    .item-2 {
        margin-right: auto;
        height: 50px;
        width: 100%;
    }

    .txt {
        margin-right: auto;
    }

    .item-3 {
        height: 50px;
        height: 50px;
        padding: 5px 5px 5px 5px;
    }

    .item-4 {
        height: 50px;
        height: 50px;
        padding: 5px 5px 5px 5px;
    }

    li.chat {
        justify-content: flex-start;
        align-items: flex-start;
        display: flex;

    }

    .chat.other {
        flex-direction: row;
    }

    .chat.mine {
        flex-direction: row-reverse;
    }

    img.avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .other .avatar {
        margin-left: 10px;
    }

    .mine .avatar {
        margin-right: 3px;
    }

    .other span {
        border: 10px solid;
        border-color: transparent #FFFFFF transparent transparent;
        margin-top: 10px;
    }

    .mine span {
        border: 10px solid;
        border-color: transparent transparent transparent #32CD32;
        margin-top: 10px;
    }

    .other>.content {
        background-color: #FFFFFF;
    }

    .mine>.content {
        background-color: #32CD32;
    }

    div.content {
        min-width: 30px;
        clear: both;
        display: inline-block;
        padding: 5px 10px;
        margin: 0 0 0 0;
        font: 14px/14px 'Noto Sans', sans-serif;
        border-radius: 10px;
        min-height: 32px;
    }

    .content>img.pic {
        width: 100%;
        margin: 3px 3px 3px 3px;
        vertical-align: middle;
    }

    .content>img.audio {
        width: 32px;
        color: white;
    }

    .input-audio {
        width: 100%;
        height: 40px;
        text-align: center;
    }

    #panels {
        background-color: #FFFFFF;
        display: flex;
        position: fixed;
        bottom: 50px;
    }

    .doutures {
        flex-direction: row;
        flex-wrap: wrap;
        display: flex;
    }

    .doutures img {
        margin: 10px 10px 10px 10px;
    }

    .doutupkg {
        flex-direction: row;
        flex-wrap: wrap;
        display: flex;
    }

    .plugins {
        flex-direction: row;
        flex-wrap: wrap;
        display: flex;
    }

    .plugin {
        padding: 10px 10px 10px 20px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .plugin img {
        width: 40px;
    }

    .plugin p {
        text-align: center;
        font-size: 16px;
    }

    .doutupkg img {
        width: 32px;
        height: 32px;
        margin: 5px 5px 5px 5px;
    }

    .upload {
        width: 64px;
        height: 64px;
        position: absolute;
        top: 1px;
        opacity: 0;
    }

    .tagicon {
        width: 32px;
        height: 32px;
    }

    .small {
        width: 32px;
        height: 32px;
    }

    .middle {
        width: 64px;
        height: 64px;
    }

    .large {
        width: 96px;
        height: 96px;
    }

    .res image {
        width: 32px;
        height: 32px;
    }

    .showtitle {
        border-radius: 4px;
        color: #fff;
        background-color: rgb(0 122 255 / 66%);
        font-size: 10px;
        font-weight: 700;
        padding: 2px 4px;
        margin-left: 10px;
    }

    .moreinfo-bar {
        float: right;
        top: 0px;
        right: 0px;
    }

    .text-ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .small-avatar-box {
        display: inline-block;
        height: 66px;
        width: 60px;
    }

    .small-avatar-box .avatar {
        height: 35px;
        width: 35px;
        margin: 4px 12px 0 12px;
    }

    .small-avatar-box .avatar-title {
        font-size: 12px;
        width: 54px;
        float: left;
        text-align: center;
    }

    .my-table-view {
        position: relative;
        margin-top: 0;
        margin-bottom: 0;
        padding-left: 0;
        list-style: none;
        background-color: #fff;
    }

    .my-table-view:before,
    .my-table-view:after {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 1px;
        content: '';
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        /* background-color: #c8c7cc; */
    }

    .my-table-view:before {
        top: -1px;
    }

    .person-info-bar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 20;
        width: 100%;
        height: 39%;
        background-color: #f7f7f7;
    }

    .person-info-bar .mui-icon {
        padding: 0 10px;
        font-size: 24px;
        position: relative;
        z-index: 20;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .person-info-bar .avatar {
        position: absolute;
        top: calc(50% - 65px);
        left: calc(50% - 48px);
        height: 96px;
        width: 96px;
    }

    .person-info-bar .avatar-title-line {
        position: absolute;
        top: calc(50% + 48px);
        left: calc(50% - 1000px);
        width: 2000px;
        font-size: 20px;
        text-align: center;
    }

    .top-bar-nav {
        margin: 13px 0;
    }

    .top-bar-nav .first {
        height: 70px;
    }

    .absolute-base {
        position: absolute;
        top: 0px;
        left: 0px;
    }

    .center-msg {
        text-align: center;
        width: 100%;
        font-size: 14px;
        color: #b1b1b1;
    }

    .clearfix:after {
        /* :after里必须要有content */
        content: "";
        /* :after默认是行内元素 */
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .clearfix {
        /* IE6,7 专有 */
        *zoom: 1;
    }
</style>
{{end}}
